import JSONEditor, { JSONEditorOptions } from 'jsoneditor'
import { Component } from 'react'
import { Button, Space, Radio, message, Tooltip } from 'antd';
import { CopyOutlined, MinusSquareOutlined, PlusSquareOutlined, SettingOutlined } from '@ant-design/icons';
import {test as jsonData} from './data'
import copy from 'copy-to-clipboard';
import 'jsoneditor/dist/jsoneditor.css'
import styles from './index.module.css'

class JSONEditor2 extends JSONEditor {
  compact(){}
  format(){}
  repair(){}
}

export default class JsonEdit extends Component<{style: React.CSSProperties}, {jsonMode: string}> {
    jsoneditor!:JSONEditor2
    container!:HTMLDivElement|null
    constructor(props:{style: React.CSSProperties}){
        super(props);
        this.state = {jsonMode: "code"}
    }
    componentDidMount () {
      const options:JSONEditorOptions = {
        mode: 'code',
        mainMenuBar: false
      };
      if (this.container) {
        this.jsoneditor = new JSONEditor2(this.container, options);
        this.jsoneditor.set(jsonData);
      }
      
    }
  
    componentWillUnmount () {
      if (this.jsoneditor) {
        this.jsoneditor.destroy();
      }
    }
  
    componentDidUpdate() {
      // this.jsoneditor.update(jsonData);
    }

    // onModeChange = (value) => {
    //     console.log(value)
    //     if (!this.jsoneditor) {
    //       return
    //     }
    //     this.jsoneditor.setMode(value.target.value)
    //     // this.jsonMode = value.target.value
    //     this.setState({jsonMode: value.target.value})
    // }
  
    render() {
      return (
          <>
          <div className={styles.opBar}>
            <Space wrap>
                <Button icon={<PlusSquareOutlined />} type="primary" onClick={() => this.jsoneditor.format()}>格式化</Button>
                <Button icon={<MinusSquareOutlined />} onClick={() => this.jsoneditor.compact()}>压缩</Button>
                <Button icon={<CopyOutlined />} onClick={() => {
                  copy(this.jsoneditor.getText())
                  message.info('复制成功!');
                }}>复制</Button>
                <Tooltip placement="top" title="修复引号和转义符，删除注释和JSONP表示法，将JavaScript对象转换为JSON。" getPopupContainer={() => {
                  const doc = document.getElementsByClassName("ant-drawer-content-wrapper")[0]
                  return doc as HTMLElement
                  }}>
                  <Button icon={<SettingOutlined />} onClick={() => this.jsoneditor.repair()}>修复</Button>
                </Tooltip>
                {
                  this.state.jsonMode === 'tree' ?
                  <>
                    <Button onClick={() => this.jsoneditor.expandAll()}>展开</Button>
                    <Button onClick={() => this.jsoneditor.collapseAll()}>折叠</Button>
                  </> :
                  ''
                }
                
                <Radio.Group onChange={(value) => {
                  console.log(value)
                  if (!this.jsoneditor) {
                    return
                  }
                  this.jsoneditor.setMode(value.target.value)
                  // this.jsonMode = value.target.value
                  this.setState({jsonMode: value.target.value})
                }} value={this.state.jsonMode}>
                    <Radio value="tree">树形</Radio>
                    <Radio value="code">代码</Radio>
                    <Radio value="text">文本</Radio>
                    <Radio value="preview">预览</Radio>
                </Radio.Group>
            </Space>
            </div>
            <div style={{...this.props?.style}} className={styles.jsoneditorContainer} ref={elem => this.container = elem} />
        </>
      );
    }
  }
